<template>
	<div class="outer" :style="{width:`${width}%`}">
		<div class="title">
				<span class="need" v-if="struc?.must">*</span>
				<span>{{ struc?.viewName }}</span>
		</div>
		<div class="contextPackage">
			<el-select 
				v-model="selectValue.value" 
				:placeholder="struc?.hint" 
				@blur="out($event)"
				@change="out($event)"
				clearable
				class="select-1"
				filterable 
				>
				<el-option
					v-for="item in options"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
			</el-select>
      <el-select 
        v-model="city"
				:placeholder="struc?.hint" 
				clearable
				class="select-1"
				filterable 
				>
				<el-option
					v-for="item in cityOptions"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
			</el-select>
      <el-select
        v-model="county"
				:placeholder="struc?.hint" 
				clearable
				class="select-1"
				filterable 
				>
				<el-option
					v-for="item in countyOptions"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
			</el-select>
      <el-input
        v-model="addDetails"
        class="input-1"
        :placeholder="struc?.hint"
				:maxlength="struc?.length"
      ></el-input>
			<span class="errorhint"  v-if="showError">{{ struc?.errorHit }}</span>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, reactive, ref, toRefs, watch } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"
type Options = {
	id: number,
	name: string
}
export default defineComponent({
	type: 203,
	name: "TAddress", 
	props: {
		struc: Object as PropType<DataStruc>,
		passWidth: {
			type: Number
		}
	},
	setup: (props, context) => {
		let showError = ref(false);
		const request = useRequet({ path: '' });
		let selectValue: DataStruc = reactive(props.struc as DataStruc)
		const dataCheck = useDataCheck();
		const list = reactive({
			options: [] as Options[],
			cityOptions: [] as Options[],
			countyOptions: [] as Options[],
			search: '',
      city: '',
      county: '',
      addDetails: ''
		})
    
    watch(() => selectValue.value, (newVal, oldVal) => {
      console.log(newVal)
      if(newVal) {
        // getAddress(newVal)
        list.cityOptions.push(
          {
            id: 301,
            name: '南昌',
          },
          {
            id: 302,
            name: '九江',
          }
        )
      } else {
        console.log(newVal)
        list.city = ''
        list.county = ''
      }
    })

    watch(() => list.city, (newVal, oldVal) => {
      console.log(newVal)
      if(newVal) {
        list.countyOptions.push(
          {
            id: 301123,
            name: '红谷滩',
          },
          {
            id: 302000,
            name: '东湖区',
          }
        )
      } else {
        list.county = ''
      }
    })

    watch(() => list.county, (newVal) => {
      if(newVal) {
        console.log(selectValue.value)
        selectValue.value = selectValue.value + ',' + list.city + ',' + list.county
      }
    })

    watch(() => list.addDetails, (newVal) => {
      if(newVal) {
        selectValue.value = selectValue.value + ',' + list.addDetails
        console.log(selectValue.value)
      }
    })
    // const getAddress = (id:any) => {
    //   request.sendRequest({
    //     address: '',
    //     params: {
		// 			value: id
		// 		},
    //     success: (resp: RespData) => {
    //       if(resp.code !== 0) return resp.msg
		// 			list.cityOptions = resp.data
    //       console.log(resp.data)
    //     },
    //     fail: (resp: RespData) => {
    //       if(resp.code !== 0) return resp.msg
          
    //     },
    //     method: "GET",
    //   })
    // }
		const req = () => {
      
      request.sendRequest({
        address: selectValue.dataSource,
        params: {
					value: list.search || ""
				},
        success: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
					list.options = resp.data
          console.log(resp.data)
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
          
        },
        method: "GET",
      })
    }
    req()
		
		let check = () => {
				if (selectValue.value) {
					showError.value = false;
				} else {
					console.debug("检查出错：",showError);
					showError.value = true;
				}
				
				return !showError.value;
			};
		
		const getValue = (e: Event) => {
			console.log('执行')
			let result = ((e.target) as HTMLInputElement).value
			list.search = result
			req()
		}
    
		onMounted(() => {
			dataCheck.addDataCheck(check);
		});
		const width = computed(() => props.passWidth)

		return {showError,check, selectValue, width, request, ...toRefs(list), getValue}
	},

	// renderTriggered(event) {
	// 	debugger;
	// },
	methods: {
			out(event: MouseEvent) {
				console.log(event)
				if(!this.selectValue.must) {
					console.log('判断', this.selectValue.must, this.showError)
					this.showError = false;
				} else {
					console.log('进来了')
					this.check()
				}

				// this.check();
		},
	},
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer {
	display: flex;
  flex-direction: column;
	margin-bottom: 10px;
	width: 100%;
	padding-right: 10px;
	box-sizing: border-box;
	font-size: $fontSize-1;
	.title {
    padding-bottom: 10px;
		.need {
			color: red;
		}
	}

	.contextPackage {
		position: relative;
    display: flex;
		.errorhint {
			@extend .error;
			height: 10px;
			display: block;
			line-height: 1;
			position: absolute;
			top: 100%;
		}
	}
}

.el-select::before {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #DCDFE6;
  position: absolute;
  z-index: 1;
  right: 30px;
}
</style>
